<section>
  <header><h3>使用方法</h3></header>
  <article>
    <p>需要 <a target="_blank" href=
    "http://v3.bootcss.com/javascript/#transitions">transition.js</a> 支持。</p>
    <p><code>.collapse</code> 隐藏条目, <code>.collapse.in</code> 显示条目。</p>
    <p>调用方式一：仅仅通过向页面元素添加 <code>data-toggle=&quot;collapse&quot;</code> 和
    <code>data-target</code> 就可以为其赋予控制可折叠页面元素的能力。 <code>data-target</code>
    属性接受一个CSS选择器作为其控制对象。请确保为可折叠页面元素添加 <code>.collapse</code> 。
    如果你希望可折叠页面元素的默认状态是展开的，请添加 <code>.in</code> 。 为了给一组可折叠页面元素添加控制器，添加
    <code>data-parent=&quot;#selector&quot;</code> 即可</p>
    <p>调用方式二：手动触发 <code>$(&quot;.collapse&quot;).collapse()</code></p>
  </article>
</section>

<section>
  <header><h3>结合面板使用</h3></header>
  <article>
    <div class="example">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Item 1</a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse fade">
            <div class="panel-body">
              The content of Item1.
              <code>.panel-collapse .collapse .fade</code>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Item 2</a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
              <p>
                The content of Item2.
                <code>.panel-collapse .collapse .in</code>
                默认显示。
              </p>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Item 3</a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
              The content of item3.
              <code>.panel-collapse .collapse</code>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>结合按钮使用</h3></header>
  <article>
    <div class="example" contenteditable="true">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseButton">hulala</button>
      <div id="collapseButton" class="in" style="height: auto;">Ho la la hu la la, hu la hu la.</div>
    </div>
  </article>
</section>

<section>
  <header><h3>方法和事件</h3></header>
  <article>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 80px;">方法</th>
          <th>例子</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>.collapse(options)</td>
          <td><code>$(&#39;#myCollapse&#39;).collapse({ toggle: false
          })</code></td>
          <td>赋予页面元素可折叠功能。接受一个可选的object作为参数。</td>
        </tr>
        <tr>
          <td>.collapse(&#39;toggle&#39;)</td>
          <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;toggle&#39;)</code></td>
          <td>展示或隐藏一个可折叠的页面元素。</td>
        </tr>
        <tr>
          <td>.collapse(&#39;show&#39;)</td>
          <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;show&#39;)</code></td>
          <td>展示一个可折叠页面元素。</td>
        </tr>
        <tr>
          <td>.collapse(&#39;hide&#39;)</td>
          <td><code>$(&#39;#myCollapse&#39;).collapse(&#39;hide&#39;)</code></td>
          <td>隐藏一个可折叠页面元素。</td>
        </tr>
      </tbody>
    </table>
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 80px;">事件</th>
          <th>使用</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>show.zui.collapse</td>
          <td><code>$(&#39;#myCollapse&#39;).on(&#39;show.zui.collapse&#39;,
          function () { // do something… })</code></td>
          <td>当 <code>show</code> 方法被调用时，此事件将被立即触发。</td>
        </tr>
        <tr>
          <td>shown.zui.collapse</td>
          <td><code>$(&#39;#myCollapse&#39;).on(&#39;shown.zui.collapse&#39;,
          function () { // do something… })</code></td>
          <td>当可折叠页面元素显示出来之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
        </tr>
        <tr>
          <td>hide.zui.collapse</td>
          <td><code>$(&#39;#myCollapse&#39;).on(&#39;hide.zui.collapse&#39;,
          function () { // do something… })</code></td>
          <td>当 <code>hide</code> 方法被调用时，此事件将被立即触发。</td>
        </tr>
        <tr>
          <td>hidden.zui.collapse</td>
          <td><code>$(&#39;#myCollapse&#39;).on(&#39;hidden.zui.collapse&#39;,
          function () { // do something… })</code></td>
          <td>当可折叠页面元素隐藏之后（同时CSS过渡效果也已执行完毕），此事件被触发。</td>
        </tr>
      </tbody>
    </table>
  </article>
</section>
